<template>
  <div :style="'height:' + height" v-loading="loading" id="iframe-box">
    <!-- <iframe
      id="iframecontainerkey"
      ref="Iframe"
      :src="url"
      frameborder="no"
      style="width: 100%; height: 100%"
      scrolling="auto"
    /> -->
    <!-- <i-vue-frame
      :src="url"
      id="iframe"
      frame-id="my-ifram"
      name="my-frame"
      width="100%"
      height="100%"
    ></i-vue-frame> -->
  </div>
</template>

<script setup>
const props = defineProps({
  src: {
    type: String,
    required: true,
  },
})
const { proxy } = getCurrentInstance()
const height = ref('')
const url = computed(() => props.src)

let loading = ref(false)

onMounted(() => {
  setStyle()
  addIfream(url.value)
  window.onresize = () => {
    setStyle()
  }
})
onActivated(() => {
  //proxy.$fn.initLayout(proxy, { loading })
})
function addIfream(url) {
  // 设置iframe样式
  let frameKey = 'fream-container-id'
  // 如果存在则删除
  if (document.getElementById(frameKey)) {
    document.body.removeChild(document.getElementById(frameKey))
  }
  let iframeBox = document.getElementById('iframe-box')

  var iframe = document.createElement('iframe')
  iframe.id = frameKey
  iframe.name = frameKey
  iframe.setAttribute('frameborder', 'no')
  iframe.src = url
  iframe.scrolling = 'auto'
  iframe.style = 'width: 100%; height: 100%'
  let iframeLoad = function (e) {
    try {
      proxy.$fn.initLayout(proxy, { loading, id: frameKey })
    } catch (error) {
      iframeLoadErrow()
    }
  }
  if (iframe.attachEvent) {
    iframe.attachEvent('onload', iframeLoad)
  } else {
    iframe.onload = iframeLoad
  }
  iframeBox.appendChild(iframe)
  let iframeLoadErrow = function () {
    ElMessage.warning('打印失败，请联系管理员')
  }
  iframe.addEventListener('error', iframeLoadErrow, true)
  console.log(url)
}
function setStyle() {
  height.value = document.documentElement.clientHeight - 60 + 'px;'
}
</script>
